<template>
  <div>
    <van-overlay :show="show" @click="show = false">

      <div style="width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;" v-if="link">
        <div>
          <img :src="link" style="width: 6.5rem; border-radius: 0.1rem;">

          <div class="flex" style="display:flex;justify-content: space-between; margin-top: 0.6rem;">
            <div
              style="width: 2.6rem; height: 0.8rem; font-size: 14px; background: #E4EDFF;  cursor: pointer; color: #005AFF; border-radius: 0.4rem;"
              class="flexcc" @click.stop="baocun">保存照片</div>
            <div
              style="width: 2.6rem; height: 0.8rem; font-size: 14px; background:#005AFF; color: white; cursor: pointer; border-radius: 0.4rem;"
              class="flexcc" @click.stop="fuzhi">复制链接</div>
          </div>
        </div>

      </div>

      <div ref="captureArea" style="width: 750px; position: fixed; right: 0; top: -2000px; background: #fff;">
        <div><img :src="item.share_img" style="width: 100%;"></div>
        <div style="display: flex; padding: 20px; justify-content: space-between;">
          <div style="width: 450px;">
            <div style="font-size: 28px; margin-bottom: 20px; line-height: 30px; min-height: 90px;">{{item.title}}</div>
            <div style="display: flex; font-size: 24px; margin-bottom: 20px;">
              <div><img :src="item.top_pic"
                  style="width: 40px; height: 40px; border-radius: 20px; margin-right: 10px;"></img></div>
              <div>{{item.store_name}}</div>
            </div>
            <div style="color: rgb(175, 179, 188); font-size: 20px;">长按识别二维码 进入下单链接</div>
          </div>

          <div style="text-align: center;">
            <div style="width: 250px; height: 250px;" id="erweimadiv"></div>
          </div>
        </div>
      </div>
    </van-overlay>

  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import QRCode from 'qrcodejs2'

  export default {
    props: ['item'],
    data() {
      return {
        all: "",
        show: false,
        link: ""
      }
    },
    created() {

    },
    mounted() {
      this.show = true
      this.$nextTick(() => {
        this.getinfo()
      })

      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;

    },
    methods: {
      baocun:function(){
        let obj = {
          "base64": this.link
        }

        const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
        const isAndroid = /Android/i.test(navigator.userAgent);

        if(isAndroid){
          window.android.saveImage(JSON.stringify(obj))
        }
        if(isIOS){
          window.webkit.messageHandlers.saveImage.postMessage(JSON.stringify(obj))
        }
      },
      fuzhi:function(item){
        this.copy(`https://njmskj.top/h5/order?id=${this.item.id}&app=1&shop_id=${this.item.shop_id}`)
        this.show = false
      },
      getinfo: function() {
        let p0 = new Promise((res, rej) => {
          var qrcode = new QRCode(document.getElementById('erweimadiv'), {
            text: `https://njmskj.top/h5/order?id=${this.item.id}&app=1&shop_id=${this.item.shop_id}`,
            width: 250,
            height: 250,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
          })

          res('ok')
        })
        p0.then(() => {
          this.capture()
        })
      },
      capture() {
        html2canvas(this.$refs.captureArea, {
          useCORS: true,
          scale: 2
        }).then(canvas => {

          // const link = document.createElement('a')
          // link.href = canvas.toDataURL('image/png')
          this.link = canvas.toDataURL('image/png')
          console.log(this.link)
          // link.download = 'screenshot.png'
          // link.click()
        })
      },


    }
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

</style>
